<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信风格文件上传聊天室（安全版）</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .chat-container {
            width: 100%;
            max-width: 400px;
            height: 85vh;
            background: #f0f0f0;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .chat-header {
            background: #128C7E;
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        
        .chat-header i {
            font-size: 24px;
            margin-right: 15px;
        }
        
        .chat-header h1 {
            font-size: 20px;
            font-weight: 500;
        }
        
        .chat-messages {
            flex: 1;
            padding: 20px 15px;
            overflow-y: auto;
            background: #e5ddd5;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.1"><rect fill="none" stroke="gray" stroke-width="2" x="10" y="10" width="80" height="80" rx="20" ry="20"/></svg>');
            background-size: 200px;
            display: flex;
            flex-direction: column;
        }
        
        .message {
            margin-bottom: 15px;
            max-width: 85%;
            clear: both;
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .received {
            align-self: flex-start;
            text-align: left;
        }
        
        .sent {
            align-self: flex-end;
            text-align: right;
        }
        
        .message-content {
            display: inline-block;
            padding: 12px 15px;
            border-radius: 7.5px;
            background: white;
            color: #333;
            word-break: break-word;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            position: relative;
            max-width: 100%;
        }
        
        .sent .message-content {
            background: #dcf8c6;
            border-top-right-radius: 0;
        }
        
        .received .message-content {
            border-top-left-radius: 0;
        }
        
        .file-bubble {
            background: white;
            border-radius: 7.5px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            min-width: 250px;
            max-width: 280px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .sent .file-bubble {
            background: #dcf8c6;
        }
        
        .file-bubble:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }
        
        .file-bubble:active {
            transform: scale(0.98);
        }
        
        .file-icon {
            font-size: 40px;
            margin-right: 15px;
            color: #128C7E;
            position: relative;
        }
        
        .file-info {
            flex: 1;
            min-width: 0;
        }
        
        .file-name {
            font-weight: 500;
            margin-bottom: 6px;
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .file-size {
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .progress-container {
            height: 5px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: #128C7E;
            width: 0%;
            transition: width 0.3s;
        }
        
        .progress-text {
            font-size: 12px;
            color: #666;
            text-align: right;
            margin-top: 5px;
        }
        
        .upload-complete {
            color: #128C7E;
            font-weight: 500;
            display: none;
        }
        
        .upload-complete i {
            margin-right: 5px;
        }
        
        .chat-input-area {
            padding: 15px;
            background: white;
            border-top: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            z-index: 5;
        }
        
        .file-upload-btn {
            background: transparent;
            color: #128C7E;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-right: 10px;
            cursor: pointer;
            font-size: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .file-upload-btn:hover {
            background: rgba(18, 140, 126, 0.1);
        }
        
        input[type="file"] {
            display: none;
        }
        
        .message-input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            border-radius: 20px;
            background: #f0f0f0;
            color: #333;
            font-size: 16px;
            outline: none;
            margin-right: 10px;
            transition: background 0.3s;
        }
        
        .message-input:focus {
            background: #e0e0e0;
        }
        
        .send-btn {
            background: #128C7E;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .send-btn:hover {
            background: #0e776c;
        }
        
        .status-message {
            font-size: 12px;
            color: #999;
            text-align: center;
            padding: 5px 0;
            background: rgba(255, 255, 255, 0.7);
            margin: 5px 20px;
            border-radius: 10px;
            animation: fadeIn 0.5s ease-out;
            display: none;
        }
        
        .timestamp {
            font-size: 11px;
            color: #999;
            text-align: center;
            margin: 10px 0;
        }
        
        .system-message {
            font-size: 12px;
            color: #666;
            text-align: center;
            padding: 5px 0;
            margin: 5px 0;
            font-style: italic;
        }
        
        .file-bubble .checkmark {
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #128C7E;
            font-size: 18px;
            display: none;
        }
        
        .file-bubble.completed .checkmark {
            display: block;
        }
        
        .file-bubble.completed .progress-container,
        .file-bubble.completed .progress-text {
            display: none;
        }
        
        .file-bubble.completed .upload-complete {
            display: block;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #128C7E;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .sender-name {
            font-weight: 500;
            font-size: 14px;
            color: #555;
        }
        
        .security-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #128C7E;
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .connection-status {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            font-size: 12px;
            background: rgba(255, 255, 255, 0.8);
            padding: 4px 10px;
            border-radius: 15px;
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }
        
        .status-connected {
            background: #4CAF50;
        }
        
        .status-disconnected {
            background: #F44336;
        }
        
        .loading-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20px;
        }
        
        .dot {
            width: 6px;
            height: 6px;
            background: #128C7E;
            border-radius: 50%;
            margin: 0 2px;
            animation: bounce 1.5s infinite;
        }
        
        .dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="security-badge">安全传输</div>
        <div class="connection-status">
            <div class="status-indicator status-connected"></div>
            <span>安全连接</span>
        </div>
        
        <div class="chat-header">
            <i class="fas fa-comments"></i>
            <h1>安全文件上传聊天室</h1>
        </div>
        
        <div class="chat-messages" id="chatMessages">
            <div class="timestamp">今天 09:30</div>
            
            <div class="message received">
                <div class="message-header">
                    <div class="user-avatar">J</div>
                    <div class="sender-name">John</div>
                </div>
                <div class="message-content">
                    你好！请把项目文档通过安全方式发给我
                </div>
            </div>
            
            <div class="message sent">
                <div class="message-header" style="justify-content: flex-end;">
                    <div class="sender-name">我</div>
                    <div class="user-avatar">M</div>
                </div>
                <div class="message-content">
                    好的，将通过加密通道发送文件
                </div>
            </div>
            
            <div class="system-message" id="systemMessage">
                <!-- 系统消息将显示在这里 -->
            </div>
        </div>
        
        <div class="chat-input-area">
            <label for="fileInput" class="file-upload-btn">
                <i class="fas fa-paperclip"></i>
            </label>
            <input type="file" id="fileInput">
            
            <input type="text" class="message-input" placeholder="输入消息...">
            <button class="send-btn">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const chatMessages = $('#chatMessages');
            const systemMessage = $('#systemMessage');
            let wsConnection = null;
            
            // 初始化WebSocket连接（模拟）
            function initWebSocket() {
                console.log("正在建立安全WebSocket连接...");
                // 在实际应用中，这里会连接到真正的WebSocket服务器
                // wsConnection = new WebSocket("wss://yourserver.com/ws");
                
                // 模拟连接成功
                setTimeout(() => {
                    showSystemMessage("安全连接已建立，通信已加密");
                }, 1000);
            }
            
            // 文件选择处理
            $('#fileInput').on('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                // 显示文件气泡（发送方）
                const fileBubble = displayFileBubble(file.name, file.type, file.size, true, false);
                
                // 滚动到底部
                scrollToBottom();
                
                // 模拟安全上传过程
                simulateSecureFileUpload(file, fileBubble);
            });
            
            // 显示文件气泡
            function displayFileBubble(name, type, size, isSent, isCompleted) {
                // 计算文件大小（MB）
                const sizeMB = (size / (1024 * 1024)).toFixed(1) + ' MB';
                
                // 获取文件图标类名
                const iconClass = getFileIconClass(type);
                
                // 创建文件气泡HTML
                const bubble = $(`
                    <div class="message ${isSent ? 'sent' : 'received'}">
                        <div class="message-header" style="${isSent ? 'justify-content: flex-end;' : ''}">
                            <div class="sender-name">${isSent ? '我' : 'John'}</div>
                            ${isSent ? '<div class="user-avatar">M</div>' : '<div class="user-avatar">J</div>'}
                        </div>
                        <div class="message-content">
                            <div class="file-bubble ${isCompleted ? 'completed' : ''}">
                                <div class="file-icon">
                                    <i class="fas ${iconClass}"></i>
                                </div>
                                <div class="file-info">
                                    <div class="file-name">${name}</div>
                                    <div class="file-size">${sizeMB}</div>
                                    <div class="progress-container">
                                        <div class="progress-bar" style="width: ${isCompleted ? '100' : '0'}%"></div>
                                    </div>
                                    <div class="progress-text">${isCompleted ? '' : '安全上传中...'}</div>
                                    <div class="upload-complete">
                                        <i class="fas fa-check-circle"></i> 上传完成
                                    </div>
                                </div>
                                <div class="checkmark">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
                
                // 添加到聊天区域
                chatMessages.append(bubble);
                
                // 返回新创建的气泡元素
                return bubble;
            }
            
            // 模拟安全文件上传
            function simulateSecureFileUpload(file, fileBubble) {
                const progressBar = fileBubble.find('.progress-bar');
                const progressText = fileBubble.find('.progress-text');
                
                let progress = 0;
                const fileSizeMB = (file.size / (1024 * 1024)).toFixed(1);
                
                // 模拟安全上传进度
                const uploadInterval = setInterval(() => {
                    progress += Math.floor(Math.random() * 8) + 1;
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(uploadInterval);
                        
                        // 上传完成
                        setTimeout(() => {
                            // 更新气泡状态
                            fileBubble.find('.file-bubble').addClass('completed');
                            
                            // 显示成功消息
                            showSystemMessage(`文件 "${file.name}" 已安全上传`);
                            
                            // 生成安全文件标识符（而不是完整路径）
                            const fileIdentifier = generateSecureFileId(file.name);
                            
                            // 通过WebSocket发送通知（模拟）
                            sendFileNotification(file.name, fileIdentifier, file.size);
                        }, 300);
                    }
                    
                    // 更新进度
                    progressBar.css('width', progress + '%');
                    const uploadedMB = (file.size * progress / 100 / (1024 * 1024)).toFixed(1);
                    progressText.text(`加密上传: ${progress}% (${uploadedMB}MB/${fileSizeMB}MB)`);
                }, 200);
            }
            
            // 生成安全文件标识符（模拟）
            function generateSecureFileId(filename) {
                // 在实际应用中，这里会生成一个唯一的、不可猜测的标识符
                // 例如: "f4e8d7c6b5a4-12345-document.pdf"
                const randomId = Math.random().toString(36).substr(2, 10);
                const timestamp = new Date().getTime();
                return `${randomId}-${timestamp}-${filename}`;
            }
            
            // 发送文件通知（模拟WebSocket）
            function sendFileNotification(filename, fileId, fileSize) {
                // 在实际应用中，这里会通过WebSocket发送消息
                console.log(`安全发送文件通知: ${filename} (ID: ${fileId})`);
                
                // 模拟接收方
                setTimeout(() => {
                    // 接收方显示文件气泡（只包含文件名和大小）
                    const receivedBubble = displayFileBubble(filename, '', fileSize, false, true);
                    
                    // 添加点击事件处理程序
                    receivedBubble.find('.file-bubble').on('click', function() {
                        downloadSecureFile(fileId, filename);
                    });
                    
                    scrollToBottom();
                    
                    // 显示接收通知
                    showSystemMessage(`${filename} 已安全送达`);
                }, 1500);
            }
            
            // 下载安全文件
            function downloadSecureFile(fileId, filename) {
                showSystemMessage(`正在安全下载: ${filename}`);
                
                // 模拟向服务器请求下载URL
                setTimeout(() => {
                    // 在实际应用中，这里会向服务器请求预签名URL
                    // const downloadUrl = `/api/download?fileId=${fileId}`
                    
                    // 模拟服务器返回的预签名URL
                    const downloadUrl = `https://secure-server.com/download/${fileId}`;
                    
                    // 创建临时链接进行下载
                    const link = document.createElement('a');
                    link.href = downloadUrl;
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    showSystemMessage(`文件已下载: ${filename}`);
                }, 1000);
            }
            
            // 显示系统消息
            function showSystemMessage(message) {
                systemMessage.text(message).show();
                
                // 3秒后隐藏
                setTimeout(() => {
                    systemMessage.fadeOut();
                }, 3000);
            }
            
            // 获取文件图标类名
            function getFileIconClass(fileType) {
                if (!fileType) return 'fa-file';
                
                fileType = fileType.toLowerCase();
                
                if (fileType.includes('image')) return 'fa-file-image';
                if (fileType.includes('pdf')) return 'fa-file-pdf';
                if (fileType.includes('zip') || fileType.includes('rar') || 
                    fileType.includes('7z') || fileType.includes('compressed')) {
                    return 'fa-file-archive';
                }
                if (fileType.includes('word')) return 'fa-file-word';
                if (fileType.includes('excel')) return 'fa-file-excel';
                if (fileType.includes('powerpoint')) return 'fa-file-powerpoint';
                if (fileType.includes('video')) return 'fa-file-video';
                if (fileType.includes('audio')) return 'fa-file-audio';
                if (fileType.includes('text') || fileType.includes('csv')) return 'fa-file-alt';
                return 'fa-file';
            }
            
            // 滚动到底部
            function scrollToBottom() {
                chatMessages.scrollTop(chatMessages[0].scrollHeight);
            }
            
            // 发送按钮事件
            $('.send-btn').click(sendMessage);
            
            // 按回车发送消息
            $('.message-input').keypress(function(e) {
                if (e.which == 13) {
                    sendMessage();
                }
            });
            
            // 发送消息函数
            function sendMessage() {
                const input = $('.message-input');
                const message = input.val().trim();
                
                if (message) {
                    // 添加消息到聊天区
                    chatMessages.append(`
                        <div class="message sent">
                            <div class="message-header" style="justify-content: flex-end;">
                                <div class="sender-name">我</div>
                                <div class="user-avatar">M</div>
                            </div>
                            <div class="message-content">
                                ${message}
                            </div>
                        </div>
                    `);
                    
                    // 清空输入框
                    input.val('');
                    
                    // 滚动到底部
                    scrollToBottom();
                    
                    // 模拟加密传输
                    showSystemMessage("消息已通过安全通道发送");
                    
                    // 模拟回复
                    setTimeout(() => {
                        chatMessages.append(`
                            <div class="message received">
                                <div class="message-header">
                                    <div class="user-avatar">J</div>
                                    <div class="sender-name">John</div>
                                </div>
                                <div class="message-content">
                                    收到，感谢发送！
                                </div>
                            </div>
                        `);
                        scrollToBottom();
                    }, 1000);
                }
            }
            
            // 初始化WebSocket连接
            initWebSocket();
            
            // 初始滚动到底部
            scrollToBottom();
        });
    </script>
</body>
</html>